<template>
  <el-row id="procedure-manage-container">
    <el-row class="tittle-nav">
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        background-color="#17252f"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="handleSelect" >
        <el-menu-item index="1">工序</el-menu-item>
        <el-menu-item index="2">工序单元</el-menu-item>
        <el-menu-item index="3">重点设备</el-menu-item>
      </el-menu>
    </el-row>

    <el-row class="pmc-body" style="">
      <el-row>
        <el-col :span="4">
          <el-card>
            <el-tree
              :data="treeDatas"
              :props="defaultProps"
              accordion
              @node-click="handleNodeClick">
            </el-tree>
          </el-card>

        </el-col>
        <el-col :span="20">

          <el-row v-if="type==1">
            <!--<procedure v-on:func="askTreeDatas"></procedure>-->
            <procedure v-on:func="askTreeDatas"></procedure>
          </el-row>
          <el-row v-else-if="type==2">
            <procedure-unit v-on:func="askTreeDatas" ></procedure-unit>
            <!--<procedure-unit v-on:func="askTreeDatas" :options="askDatas"></procedure-unit>-->
          </el-row>
          <el-row v-else>
            <!--<device v-on:func="askTreeDatas" :options="askDatas"></device>-->
            <device v-on:func="askTreeDatas"></device>
          </el-row>

        </el-col>
      </el-row>

    </el-row>


  </el-row>
</template>

<script>
    import Procedure from "../../../components/ProcedureManage/procedure";
    import ProcedureUnit from "../../../components/ProcedureManage/procedureUnit";
    import Device from "../../../components/ProcedureManage/device";
    export default {
        name: "index",
      components: {Device, ProcedureUnit, Procedure},
      data(){
          return {
            activeIndex: '1',
            type:1,
            procedureShow: false,
            procedureUnitShow: false,
            deviceShow: false,
            treeDatas: [],
            askDatas:[],
            defaultProps: {
              children: 'children',
              label: 'label'
            }
          }
      },
      created() {
        this.$emit('fixHeadIndex', "6")
      },
      mounted(){
          this.askTreeDatas()
      },
      methods:{
        handleSelect(key, keyPath){
          this.activeIndex = key
          switch (key) {
            case "1":{
              this.type = 1
             /* this.procedureShow = true
              this.procedureUnitShow = false
              this.deviceShow = false*/
              break
            }
            case "2":{
              this.type = 2
             /* this.procedureShow = false
              this.procedureUnitShow = true
              this.deviceShow = false*/
              break
            }
            case "3":{
              this.type = 3
             /* this.procedureShow = false
              this.procedureUnitShow = false
              this.deviceShow = true*/
              break
            }
          }
        },
        askTreeDatas: function(){
          console.log('this.procedureShow',this.procedureShow)
          console.log('this.procedureUnitShow',this.procedureUnitShow)
          console.log('this.deviceShow',this.deviceShow)
          let _that = this
          let userId = sessionStorage.getItem("userId")
          let url = _that.ports.procedureManage.process.all
          let askData = {
            userId: userId,
          }
          this.http.get(url,askData, res => {
            console.log("treeDatas",res)
            if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
              _that.doDatas(res.data)
            }else{
              _that.$message('数据获取失败!');
            }
          })
        },
        doDatas: function(datas){
          this.askDatas = datas
          this.procedureShow = true
          let arry = []
          for(let i=0;i<datas.length;++i){
            let obj = {}
            obj.label = datas[i].name
            obj.children = []
            arry.push(obj)

            for(let j = 0;j < datas[i].processElements.length;++j){
              let obj2 = {}
              obj2.label = datas[i].processElements[j].name
              obj2.children = []
              arry[i].children[j]=obj2

              for(let z = 0;z < datas[i].processElements[j].facilityEntities.length;++z){
                let obj3 = {}
                obj3.label = datas[i].processElements[j].facilityEntities[z].name
                arry[i].children[j].children[z] = obj3
              }
            }
          }
          this.treeDatas=arry
        },
        handleNodeClick(){}
      }

    }
</script>

<style lang="scss">
  #procedure-manage-container{

    .tittle-nav{
      height: 50px;
      background-color: #17252f;
      display: -webkit-flex;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .el-menu {
      display: inline-block;
      font-size: 14px;
      line-height: 50px;
      margin-left: 8px;
    }

    .el-menu--horizontal > .el-menu-item {
      height: 50px!important;
      line-height: 50px!important;
      margin: 0;
      border-bottom: 0px solid transparent;
    }

    .el-menu.el-menu--horizontal {
      border-bottom: solid 0px #e6e6e6;
    }

    .el-menu--horizontal>.el-menu-item.is-active {
      border-bottom: 0px solid #303133;
      color: #303133;
    }

    .pmc-body{
      height: 800px;
      background-color: white;
      margin: 0 10px 0 10px
    }

    .el-card{
      height: 780px;
      margin-top: 10px;
      margin-left: 10px;
    }

  }

</style>
